{% load static %}
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- <link rel="icon" href="../../../../favicon.ico"> -->
    <title>Soda-admin</title>
    <link href="{% static 'Znd_class/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'Znd_class/css/index.css' %}" rel="stylesheet">
    <link href="{% static 'Znd_class/css/open-iconic-bootstrap.min.css' %}" rel="stylesheet">
</head>

<body>
    <!-- 创建请求模态框 -->
    <div class="modal fade" id="addSingleCheckedModal" tabindex="-1" role="dialog"
        aria-labelledby="addSingleCheckedModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addSingleCheckedModalLabel">认定添加</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">Recipient:</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="col-form-label">Message:</label>
                            <textarea class="form-control" id="message-text"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-info">提交</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addMultiCheckedModal" tabindex="-1" role="dialog"
        aria-labelledby="addMultiCheckedModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addMultiCheckedModalLabel">认定批量导入</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="input-group">
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="inputFile">
                                <label class="custom-file-label" for="inputFile">点击以选择文件，支持xls,xlsx格式的表格文件</label>
                            </div>
                        </div>
                    </form>
                    <div>
                        <br>
                        &nbsp;&nbsp;导入模板下载: <a href="#">认定批量导入模板.xlsx</a>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-info">导入</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框结束 -->

    <!-- 导航栏 -->
    <nav class="navbar navbar-dark navbar-expand bg-info text-white">
        <div class="container">
            <span class="navbar-brand mb-0 h1 nav-fix-margin">Soda admin</span>
            <div class="dropdown nav-fix-margin">
                <a class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    欢迎, Admin&nbsp;
                    <span class="oi oi-menu"></span>
                </a>
                <div class="dropdown-menu dropdown-menu-right">
                    <a class="dropdown-item" href="#">
                        <span class="oi oi-pencil"></span> &nbsp;
                        密码修改
                    </a>
                    <a class="dropdown-item" href="#">
                        <span class="oi oi-account-logout"></span> &nbsp;
                        退出登录
                    </a>
                </div>
            </div>
        </div>
    </nav>
    <!-- 导航栏结束 -->

    <!-- 主要内容 -->
    <div class="container">
        <div class="row">

            <!-- 页面切换和数据统计 -->

            <div class="col-md-3 fix-padding">

                <div class="card">
                    <div class="list-group " id="tabSelect">
                        <a class="list-group-item sactive text-white" id="">认定审核</a>
                        <a class="list-group-item" id="">数据管理</a>
                    </div>
                </div>
                <div class="card" id="dataCount">
                    <div class="card-header bg-info text-white">
                        数据统计
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            Cras justo odio
                            <span class="badge badge-secondary badge-pill">1</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            Dapibus ac facilisis in
                            <span class="badge badge-secondary badge-pill">14</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            Vestibulum at eros
                            <span class="badge badge-secondary badge-pill">140</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            Vestibulum at eros
                            <span class="badge badge-secondary badge-pill">1400</span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 页面切换和数据统计结束 -->

            <!-- 认定审核 -->
            <div class="col-md-9 fix-padding tab-content tabs" id="firstTab">

                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">认定添加</h5>
                        <button type="button" class="btn btn-sm btn-info" data-toggle="modal"
                            data-target="#addSingleCheckedModal">
                            单条添加
                        </button>
                        <button type="button" class="btn btn-sm btn-info" data-toggle="modal"
                            data-target="#addMultiCheckedModal">
                            批量导入
                        </button>
                    </div>
                </div>

                <!-- 当前请求列表 -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">待审核的认定</h5>
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th scope="col">Name</th>
                                    <th scope="col">Kind</th>
                                    <th scope="col">Checker</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Option</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Mark</th>
                                    <td>Otto</td>
                                    <td>待定</td>
                                    <td>
                                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning"
                                            role="progressbar">
                                            待审核
                                        </div>
                                    </td>
                                    <td>admin</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 当前请求结束 -->

                <!-- 过去请求列表 -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">最近审核的认定</h5>
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th scope="col">Name</th>
                                    <th scope="col">Kind</th>
                                    <th scope="col">Checker</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Option</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Jacob</th>
                                    <td>Thornton</td>
                                    <td>admin</td>
                                    <td>
                                        <div class="progress-bar bg-success" role="progressbar">
                                            通过
                                        </div>
                                    </td>
                                    <td>admin</td>
                                </tr>
                                <tr>
                                    <td>Larry</th>
                                    <td>the Bird</td>
                                    <td>admin</td>
                                    <td>
                                        <div class="progress-bar progress-bar-striped bg-danger" role="progressbar">
                                            拒绝
                                        </div>
                                    </td>
                                    <td>admin</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 过去请求结束 -->

                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">认定数据库查询</h5>
                        <div class="input-group search-space">
                            <input type="text" class="form-control" placeholder="Recipient's username"
                                aria-label="Recipient's username" aria-describedby="basic-addon2">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button">搜索</button>
                            </div>
                        </div>
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th scope="col">Name</th>
                                    <th scope="col">Kind</th>
                                    <th scope="col">Checker</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Option</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Jacob</th>
                                    <td>Thornton</td>
                                    <td>admin</td>
                                    <td>
                                        <div class="progress-bar bg-success" role="progressbar">
                                            通过
                                        </div>
                                    </td>
                                    <td>admin</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>


            </div>
            <!-- 认定审核结束 -->

            <!-- 数据管理 -->
            <div class="col-md-9 fix-padding tab-content tabs" id="secondTab">

                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">班级管理</h5>
                        <div>
                            <button type="button" class="btn btn-sm btn-info" data-toggle="modal"
                                data-target="#addSingleCheckedModal">
                                单条添加
                            </button>
                            <button type="button" class="btn btn-sm btn-info" data-toggle="modal"
                                data-target="#addMultiCheckedModal">
                                批量导入
                            </button>
                        </div>
                        <div class="input-group search-space">
                            <input type="text" class="form-control" placeholder="Recipient's username"
                                aria-label="Recipient's username" aria-describedby="basic-addon2">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button">搜索</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">学生管理</h5>
                        <div>
                            <button type="button" class="btn btn-sm btn-info" data-toggle="modal"
                                data-target="#addSingleCheckedModal">
                                单条添加
                            </button>
                            <button type="button" class="btn btn-sm btn-info" data-toggle="modal"
                                data-target="#addMultiCheckedModal">
                                批量导入
                            </button>
                        </div>
                        <div class="input-group search-space">
                            <input type="text" class="form-control" placeholder="Recipient's username"
                                aria-label="Recipient's username" aria-describedby="basic-addon2">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button">搜索</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">项目管理</h5>
                        <div>
                            <button type="button" class="btn btn-sm btn-info" data-toggle="modal"
                                data-target="#addSingleCheckedModal">
                                单条添加
                            </button>
                            <button type="button" class="btn btn-sm btn-info" data-toggle="modal"
                                data-target="#addMultiCheckedModal">
                                批量导入
                            </button>
                        </div>
                        <div class="input-group search-space">
                            <input type="text" class="form-control" placeholder="Recipient's username"
                                aria-label="Recipient's username" aria-describedby="basic-addon2">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button">搜索</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- 数据管理结束 -->

        </div>
    </div>
    <!-- 主要内容结束 -->

    <!-- 页脚 -->
    <footer class="footle bg-white">
        <div class="container">
            <span class="text-muted">&copy; 2019 &nbsp;&nbsp;&nbsp;&nbsp; 请使用IE10或更新的版本、Chrome、Firefox浏览器浏览本网站</span>
        </div>
    </footer>
    <!-- 页脚结束 -->

    <script src="{% static 'Znd_class/js/jquery.min.js' %}"></script>
    <script src="{% static 'Znd_class/js/popper.min.js' %}"></script>
    <script src="{% static 'Znd_class/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'Znd_class/js/tabs.js' %}"></script>
</body>

</html>